import React from 'react';
import {inject, observer} from 'mobx-react';
import { Browser } from 'weaver-mobile-page'
import { withRouter } from 'react-router-dom';
import { Tools ,SearchBar,Icon, NavBar, Picker, WhiteSpace, List, DatePicker,Carousel, WingBlank} from 'weaver-mobile';
const getLabel = Tools.getLabel;
@withRouter
class GoalLevelCard extends React.Component {

    constructor(props){
        super(props);
        this.state={
            dataList:[
            ],
            current:{ 
            },
            rootname:"",
            index:0
        }
    }

    
    componentWillMount(){

    }

    componentWillReceiveProps(newProps){
        if(this.props.locationKey != newProps.locationKey ||this.props.currentkey != newProps.currentkey){
            let {dataList,rootname,currentkey} = newProps;
            let {current,index} = this.state;
            if(dataList && dataList.length > 0){
                dataList.map((item,i)=>{
                    if(item.id == currentkey){
                        current.id = item.id;
                        current.name = item.name;
                        current.target = item.target;
                        current.tunit = item.tunit;
                        index = i;
                    }
                })
                 rootname = "";
                 this.setState({current,dataList,rootname,index})
            }
            this.setState({rootname})
        }else{
            let {rootname} = newProps;
            this.setState({rootname})
        }
    }

    componentDidMount(){
        let {dataList,currentkey} = this.props;
        let {current,index} = this.state;
        if(dataList && dataList.length > 0){
            dataList.map((item,i)=>{
                if(item.id == currentkey){
                    current.id = item.id;
                    current.name = item.name;
                    current.target = item.target;
                    current.tunit = item.tunit;
                    index = i;
                }
            })
             this.setState({current,index})
        }
    }

    clickSwicth=(e,dir,key)=>{
        let {current,dataList} = this.state;
        let {onCallBackSuccess} = this.props;
        let index = 0;
        for(let i = 0;i < dataList.length;i ++){
            let data = dataList[i];
            if(data.id == current.id){
                index = i;
            }
        }
        if(dir == "left"){
            if(index == 0){
                index = dataList.length - 1;
            }else{
                index --
            }
        }
        if(dir == "right"){
            if(index == dataList.length -1){
                index = 0;
            }else{
                index ++;
            }
        }
        current = dataList[index];

        this.setState({current})
        if(typeof onCallBackSuccess === "function"){
            onCallBackSuccess(current.id);
        }
    }

    // getCard = (current) =>{
    //     let {dataList,rootname} = this.state;
    //     return dataList.length > 1?<div className="workrelate_mobile_card" style={this.props.style}>
    //                 <div className="workrelate_mobile_card_left">
    //                     <Icon type="left" onClick={(value)=>this.clickSwicth("left")}/>
    //                 </div>
    //                 <div className="workrelate_mobile_card_middle">
    //                     <p style={{color:'white',fontSize:'16px',margin:'6% 0px',textAlign:'center'}}>{current.name}</p>
    //                     <p style={{color:'white',fontSize:'20px',margin:'7% 0px',textAlign:'center'}}>{current.target+current.tunit}</p>
    //                 </div>
    //                 <div className="workrelate_mobile_card_right">
    //                <Icon type="right" onClick={(value)=>this.clickSwicth("right")} />
    //                 </div>
    //             </div> : <div className="workrelate_mobile_card">
    //                 <div className="workrelate_mobile_card_middle_two">
    //                     <p style={{color:'white',fontSize:'16px',margin:'6% 0px',textAlign:'center'}}>{current.name}</p>
    //                     <p style={{color:'white',fontSize:'20px',margin:'7% 0px',textAlign:'center'}}>{current.target+current.tunit}</p>
    //                 </div>
    //             </div>
    // } 
    slideChange = (from,to) =>{
        let {dataList} = this.state;
        let {onCallBackSuccess} = this.props;
        let current = dataList[to];
        this.setState({current})
        if(typeof onCallBackSuccess === "function"){
            if(current){
                onCallBackSuccess(current.id,current.name);
            }
        }
    }

    viewDetail = (id) =>{
        window.openAppLink(null, id, "wrlgoal", null, null)
        // this.props.history.push("/goalHome/goalDetail?id=" + id)
      
    }



    getCard = (current) =>{
        let {dataList,rootname,index} = this.state;
            if(dataList.length == 1){
                return <div className="workrelate_mobile_card" style={{width:"92%",marginLeft:"4%",backgroundImage: "linear-gradient(90deg, #56D7C3 4%, #4EBDDD 100%)"}} onClick={(id)=>this.viewDetail(current.id)}>
                    <div className="workrelate_mobile_card_left" >
                                {/* <Icon type="left" onClick={(e,value)=>this.clickSwicth(e,"left",key)}/> */}
                            </div>
                            <div className="workrelate_mobile_card_middle">
                                <p className="middle_title">{current.name}</p>
                                <p className="middle_value">{current.target+current.tunit}</p>
                            </div>
                            <div className="workrelate_mobile_card_right"  >
                                {/* <Icon type="right" onClick={(e,value)=>this.clickSwicth(e,"right",key)}/> */}
                            </div>
                </div>
            }else{
                return <div className="workrelate_mobile_card">
                    <WingBlank>
                        <Carousel
                            selectedIndex = {index}
                            autoplay={false}
                            infinite={true}
                            beforeChange={(from, to) => this.slideChange(from,to)}
                            // afterChange={index => this.slideChange(index)}

                            >
                            {dataList.length > 0 && dataList.map((item,key) => (
                                <div className="workrelate_mobile_card" key={item.id} onClick={(id)=>this.viewDetail(item.id)}>
                                    <div className="workrelate_mobile_card_left" >
                                        {/* <Icon type="left" onClick={(e,value)=>this.clickSwicth(e,"left",key)}/> */}
                                    </div>
                                    <div className="workrelate_mobile_card_middle">
                                        <p className="middle_title">{current.name}</p>
                                        <p className="middle_value">{current.target+current.tunit}</p>
                                    </div>
                                    <div className="workrelate_mobile_card_right"  >
                                        {/* <Icon type="right" onClick={(e,value)=>this.clickSwicth(e,"right",key)}/> */}
                                    </div>
                                </div>
                            ))}
                        </Carousel>
                    </WingBlank>
                </div>
            }  
    }

    render(){
        let {rootname,current} = this.state;
        return (
            <div>
                {rootname == ""?this.getCard(current):<div className="workrelate_mobile_card" style={{width:"92%",marginLeft:"4%",backgroundImage: "linear-gradient(90deg, #2FB2FF 4%, #3185FF 100%)"}}><p style={{color:'white',fontSize:'18px',margin:'0',textAlign:'center',lineHeight:'100px'}}>{rootname}</p></div>}
            </div>

        )
    }
}

export default GoalLevelCard; 
